<template>
  <el-row>
    <el-col class="aside-style">
      <el-menu default-active="0-0" :router="true" active-text-color="orange">
        <template v-for="(item, index) in menus">
          <el-menu-item
            v-if="item.menuChilds.length === 0"
            background-color="#000"
            text-color="#fff"
            :key="item.menuId"
            :index="String(index)"
            :route="{ path: item.menuUrl }"
          >
            <!-- <i :class="item.menuImgClass"></i> -->
            <span slot="title">{{ item.menuName }}</span>
          </el-menu-item>
          <el-submenu v-else :index="String(index)" :key="item.menuId">
            <template slot="title">
              <!-- <i :class="item.menuImgClass"></i> -->
              <span>{{ item.menuName }}</span>
            </template>
            <el-menu-item
              v-for="(subMenuItem, subIndex) in item.menuChilds"
              :key="subMenuItem.menuId"
              :index="index + '-' + subIndex"
              :route="{ path: subMenuItem.menuUrl }"
              >{{ subMenuItem.menuName }}
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          menuId: 1,
          menuName: "会员管理",
          menuUrl: "",
          pathname: "",
          componentPath: "",
          menuImgClass: "el-icon-menu",
          pId: 0,
          menuState: "0",
          isContainChildren: false,
          menuChilds: [
            {
              menuId: 10,
              menuName: "会员档案",
              menuUrl: "/main/profile",
              pathname: "profile",
              componentPath: "/views/Profile",
              menuImgClass: "el-icon-s-fold",
              pId: 2,
              menuState: "0",
              isContainChildren: false,
              menuChilds: [],
            },
            {
              menuId: 11,
              menuName: "体验上传",
              menuUrl: "/main/upload",
              pathname: "upload",
              componentPath: "/views/Upload",
              menuImgClass: "el-icon-document",
              pId: 2,
              menuState: "0",
              isContainChildren: false,
              menuChilds: [],
            },
            {
              menuId: 12,
              menuName: "会员统计",
              menuUrl: "/main/statistical",
              pathname: "statistical",
              componentPath: "/views/Statistical",
              menuImgClass: "el-icon-document",
              pId: 2,
              menuState: "0",
              isContainChildren: false,
              menuChilds: [],
            },
          ],
        },
      ],
    };
  },
};
</script>
.aside-style {
  height: calc(100vh - 60px);
  background-color: #000;
}
<style>
</style>